<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  showRightIcon: {
    type: Boolean,
    default: false
  },
  rightIcon: {
    type: String,
    default: '/static/common/btn-search-bar.png'
  },
  height: {
    type: String,
    default: '104rpx'
  }
});
const searchBarBtnClick = () => {
  console.info('searchBarBtnClick')
  uni.navigateTo({
    url: '/pages/sell-goods/category/index'
  })
}
const searchBarInputClick = () => {
  console.info('searchBarBtnClick')
  uni.navigateTo({
    url: '/pages/sell-goods/hot-search/index'
  })
}
const paddingStyle = '20rpx 32rpx 20rpx 32rpx'
</script>

<template>
  <view class="search-head">
    <view class="search-head-container">
      <view class="search-body" @click="searchBarInputClick">
          <view class="search-bar-prefix">
            <image class="search-img" src="@/static/common/btn-search.png"></image>
          </view>
          <view class="search-input-body">
            <input disabled class="search-input" placeholder="伯伦洗衣机XQB100-1U2R"
                   placeholder-class="search-input-placeholder" />
          </view>
      </view>
      <view class="search-right-icon" @click="searchBarBtnClick" v-if="showRightIcon">
        <image class="right-icon-img" :src="rightIcon"></image>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search-head {
  background: inherit;

  width: 100%;
  box-sizing: border-box;
  height: v-bind('props.height');
  padding: v-bind(paddingStyle);

  .search-head-container{
    width: 100%;
    height: 100%;
    display: flex;
    .search-body{
      flex: 1;
      height: 100%;
      background-color: #FFFFFF;
    }
    .search-right-icon{
      width: 64rpx;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .right-icon-img{
        width: 36rpx;
        height: 56rpx;
      }
    }
  }
}
.search-body{
  border-radius: 34rpx;
  display: flex;
  .search-bar-prefix{
    width: 72rpx;
    height: 100%;
    display: flex;
    .search-img {
      width: 32rpx;
      height: 32rpx;
      margin: auto;
    }
  }
  .search-input-body{
    flex: 1;
    height: 100%;
    .search-input {
      height: 100%;
      font-size: 28rpx;
      line-height: 40rpx;
      font-weight: 400;

    }
  }
}
</style>
